import 'package:flutter/material.dart';
import 'package:flutter_base/base/widget/base_get_builder.dart';
import 'package:flutter_base/config/app_color.dart';
import 'package:flutter_base/generated/assets.dart';
import 'package:flutter_base/user/app_user_manager.dart';
import 'package:flutter_base/widgets/appbar/common_app_bar.dart';
import 'package:flutter_base/widgets/button/common_button.dart';
import 'package:flutter_base/widgets/button/debounce_gesture_detector.dart';
import 'package:flutter_base/widgets/dialog/image_pick_select_sheet.dart';
import 'package:flutter_base/widgets/image/auto_image.dart';
import 'package:flutter_base/widgets/image/circle_avatar_widget.dart';
import 'package:flutter_base/widgets/textfield/custom_text_field.dart';
import 'package:flutter_base/widgets/widget_line.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import 'setting_profile_logic.dart';

class SettingProfilePage extends StatelessWidget {
  final logic = Get.put(SettingProfileLogic());

  SettingProfilePage({super.key});

  @override
  Widget build(BuildContext context) {
    return BaseGetBuilder<SettingProfileLogic>(
      appBar: const CommonAppBar(
        title: 'Data Editing',
        // titleColor: Colors.black,
        // backgroundColor: Colors.white,
      ),
      builder: (controller) {
        return SingleChildScrollView(
          padding: EdgeInsets.symmetric(horizontal: 16.w),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              SizedBox(height: 20.w),
              // 头像部分
              GestureDetector(
                onTap: () {
                  const ImagePickSelectSheet().show();
                },
                child: _buildAvatar(),
              ),
              SizedBox(height: 40.w),
              // 个人信息表单
              _buildNameField(),
              SizedBox(height: 20.w),
              _buildGenderSelector(),
              SizedBox(height: 20.w),
              _buildBirthdaySelector(),
              // SizedBox(height: 60.w),
              // 保存按钮

              // CommonButton.expend(
              //   title: 'Save',
              //   onClick: logic.saveProfile,
              // ),
              // SizedBox(height: 40.w),
            ],
          ),
        );
      },
    );
  }

  // 头像部分
  Widget _buildAvatar() {
    return Stack(
      clipBehavior: Clip.none,
      children: [
        // 头像
        CircleAvatarWidget(
          radius: 36.w,
          imageUrl: '', // 用户头像URL
          borderColor: Colors.white,
          borderWidth: 1.w,
        ),
        // 相机图标
        Positioned(
          right: 0,
          bottom: 0,
          child: Container(
            width: 24.w,
            height: 24.w,
            decoration: const BoxDecoration(
              color: AppColor.primary,
              shape: BoxShape.circle,
            ),
            child: Center(
                child: AutoImage(
              Assets.mineProfileCamera,
              width: 16.w,
            )),
          ),
        ),
      ],
    );
  }

  // 姓名输入框
  Widget _buildNameField() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Change Name',
          style: TextStyle(
            fontSize: 16.sp,
            color: AppColor.color0C0A09,
            fontWeight: FontWeight.w600,
          ),
        ),
        SizedBox(height: 8.w),
        CustomTextField(
          textEditingController: logic.nameController,
          focusNode: logic.nameFocusNode,
          hintText: (AppUserManager().user.value?.username ?? '').isNotEmpty
              ? (AppUserManager().user.value?.username ?? '')
              : 'Please enter your name',
          // backgroundColor: Colors.white,
          // borderRadius: BorderRadius.circular(8.w),
          // height: 48,
          onSubmitted: logic.handleNameSubmitted,
          textInputAction: TextInputAction.done,
        ),
      ],
    );
  }

  // 性别选择器
  Widget _buildGenderSelector() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Gender',
          style: TextStyle(
            fontSize: 16.sp,
            color: AppColor.color0C0A09,
            fontWeight: FontWeight.w500,
          ),
        ),
        SizedBox(height: 8.w),
        DebounceGestureDetector(
          onTap: logic.showGenderSelector,
          child: Container(
            height: 48.w,
            padding: EdgeInsets.symmetric(horizontal: 12.w),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(30.w),
              border: Border.all(color: AppColor.colorF5F7FA),
            ),
            child: Row(
              children: [
                // AutoImage(
                //   Assets.settingGender,
                //   width: 24.w,
                //   height: 24.w,
                // ),
                // SizedBox(width: 8.w),
                Expanded(
                  child: Obx(() => Text(
                        logic.selectedGender.value == 1 ? 'Male' : 'Female',
                        style: TextStyle(
                          fontSize: 14.sp,
                          color: AppColor.color0C0A09,
                        ),
                      )),
                ),
                AutoImage(
                  Assets.commonItemBottom,
                  width: 24.w,
                  height: 24.w,
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }

  // 生日选择器
  Widget _buildBirthdaySelector() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Date of birth',
          style: TextStyle(
            fontSize: 16.sp,
            color: AppColor.color0C0A09,
            fontWeight: FontWeight.w500,
          ),
        ),
        SizedBox(height: 8.w),
        DebounceGestureDetector(
          onTap: logic.showDatePicker,
          child: Container(
            height: 48.w,
            padding: EdgeInsets.symmetric(horizontal: 16.w),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(30.w),
                border: Border.all(color: AppColor.colorF5F7FA),
                color: Colors.white),
            child: Row(
              children: [
                // AutoImage(
                //   Assets.settingCalendar,
                //   width: 24.w,
                //   height: 24.w,
                // ),
                // SizedBox(width: 8.w),
                Expanded(
                  child: Obx(() => Text(
                        logic.birthdayText.value.isNotEmpty
                            ? logic.birthdayText.value
                            : '请选择出生日期',
                        style: TextStyle(
                          fontSize: 14.sp,
                          color: logic.birthdayText.value.isNotEmpty
                              ? AppColor.color0C0A09
                              : AppColor.color0C0A09.withOpacity(0.16),
                        ),
                      )),
                ),
                AutoImage(
                  Assets.commonItemBottom,
                  width: 24.w,
                  height: 24.w,
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}
